<template>
  <view class="recommendation">

    <card-com title="推荐理由">
      <view class="items">
        <view
            class="item"
            v-for="(rec, index) in recommendations"
            :key="index"
        >
          <view class="number">{{ index+1 }}</view>
          <view class="text">{{ rec }}</view>
        </view>
      </view>
    </card-com>
  </view>
</template>

<script>
export default {
  name: "ProductRecommendationsCom",
  props: {
    recommendations: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.recommendation {
  .items {
    .item {
      display: flex;
      justify-content: flex-start;
      margin: 10rpx 0;
      .number {
        width: 24rpx;
        height: 24rpx;
        line-height: 26rpx;
        margin-right: 10rpx;
        font-size: 16rpx;
        color: #999999;
        text-align: center;
        box-shadow: 0 2rpx 12rpx 0 rgba(0,0,0,0.1);
        border: 2rpx solid #999999;
        border-radius: 24rpx;
      }
      .text {
				width: 620rpx;
        font-size: 20rpx;
        color: #999999;
      }
    }
  }
}
</style>
